<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="main" class="grid-content bg-purple cardBox"></div>
      </el-col>
      <el-col :span="12">
        <div id="main2" class="grid-content bg-purple cardBox"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="main3" class="grid-content bg-purple cardBox"></div>
      </el-col>
      <el-col :span="12">
        <div id="main4" class="grid-content bg-purple cardBox"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
</script>

<script>
import { _delete } from 'lin/plugin/axios'
import acceptModel from '@/model/accept'
import maintenanceModel from '@/model/maintenance'

export default {
  data() {
    return {}
  },
  async created() {},
  // DOM 渲染完成触发
  async mounted() {
    const res = await acceptModel.getStatCurMonth()

    let monthDateX1 = [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '26',
      '27',
      '28',
      '29',
      '30',
    ]
    let monthDate1 = []
    if (res && res.length > 0) {
      monthDate1 = res
      monthDateX1 = []
      for (let i = 0; i < res.length; i++) {
        monthDateX1.push(`${i + 1 }`)
      }
    }

    const res2 = await maintenanceModel.getStatCurMonth()
    let monthDateX2 = [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '26',
      '27',
      '28',
      '29',
      '30',
    ]
    let monthDate2 = []
    if (res2 && res2.length > 0) {
      monthDate2 = res2
      monthDateX2 = []
      for (let i = 0; i < res2.length; i++) {
        monthDateX2.push(`${i + 1 }`)
      }
    }

    const res3 = await acceptModel.getStatCurYear()
    const monthDateX3 = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    let monthDate3 = []
    if (res3 && res3.length > 0) {
      monthDate3 = res3
    }

    const res4 = await acceptModel.getStatCurRatio()
    const monthDate4 = [
      {
        value: 0,
        name: '已受理',
      },
      {
        value: 0,
        name: '未受理',
      },
    ]
    debugger
    if (res4 && res4.length === 2) {
      monthDate4[0].value = res4[0]
      monthDate4[1].value = res4[1]
    }

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'))
    const myChart2 = echarts.init(document.getElementById('main2'))
    const myChart3 = echarts.init(document.getElementById('main3'))
    const myChart4 = echarts.init(document.getElementById('main4'))

    // 绘制图表
    myChart.setOption({
      grid: {
        textAlign: 'center', // 水平居中
        containLabel: true, // 如果使用的是 ECharts 4 及以上版本，需要加上这一行
      },
      title: {
        text: '当月受理单统计',
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: monthDateX1,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: monthDate1,
          type: 'line',
        },
      ],
    })

    myChart2.setOption({
      grid: {
        textAlign: 'center', // 水平居中
        containLabel: true, // 如果使用的是 ECharts 4 及以上版本，需要加上这一行
      },
      title: {
        text: '当月工作单统计',
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: monthDateX2,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: monthDate2,
          type: 'line',
        },
      ],
    })

    myChart3.setOption({
      grid: {
        textAlign: 'center', // 水平居中
        containLabel: true, // 如果使用的是 ECharts 4 及以上版本，需要加上这一行
      },
      title: {
        text: '当年受理单统计',
      },
      tooltip: {},
      xAxis: {
        data: monthDateX3,
      },
      yAxis: {},
      series: [
        {
          name: '受理量',
          type: 'bar',
          data: monthDate3,
        },
      ],
    })

    myChart4.setOption({
      grid: {
        textAlign: 'center', // 水平居中
        containLabel: true, // 如果使用的是 ECharts 4 及以上版本，需要加上这一行
      },
      title: {
        text: '当月受理比例',
      },
      tooltip: {},
      series: [
        {
          type: 'pie',
          data: monthDate4,
        },
      ],
    })
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding-left: 20px;
  padding-right: 20px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 400px;
  min-width: 600px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.cardBox {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
</style>
